<template>
  <div class="phones">
    <div v-for="(itemOne, indexOne) in ProductData" :key="indexOne">
      <!-- hover 显示x号 -->
      <i class="el-icon-close" @click="remGoods(itemOne.product_id)" v-show="isMore"></i>
      <img :src="$getImg + itemOne.product_picture" @click="dect(itemOne.product_id)" />
      <p class="styCs">{{ itemOne.product_name }}</p>
      <p style="margin: 5px 0 10px 0">
        <small class="Price">{{ itemOne.product_title }}</small>
      </p>
      <p>
        <span style="color: #ff6700">{{ itemOne.product_price }}元</span>
        &emsp;
        <s class="Price">{{ itemOne.product_selling_price }}元</s>
      </p>
    </div>

    <div v-if="!isMore" class="browse">
      <p @click="dectTow">浏览更多<i class="el-icon-d-arrow-right" /></p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["ProductData", "isMore"],
  name: "Good",
  data() {
    return {
      categIds: [], //存储id
    };
  },
  mounted() {},
  methods: {
    // 通过点击子组件的某一个商品 获取id值
    dect(id) {
      // 第一个参数是将要在父组件触发的事件
      this.$emit("fadect", id);
    },
    // 点击手机区域浏览更多显示的数据
    dectTow() {
      this.$variate.categId = this.categId;
      this.$router.push("/goods");
    },

    // 点击删除
    remGoods(id) {
      // 将id传递到vuexj进行删除操作
      this.$store.commit("delGoods", id);
    },
  },
  computed: {
    categId() {
      let arr = [];
      if (this.ProductData.length) {
        this.ProductData.forEach((i) => {
          if (!arr.includes(i.category_id)) {
            arr.push(i.category_id);
          }
        });
      }
      // console.log(arr);
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.Price {
  color: #b0b0b0;
}
small {
  width: 150px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.styCs {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 30px;
}
.phones {
  display: flex;
  flex-wrap: wrap;
  div {
    background: #fff;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
  }
  & > div:hover {
    margin-top: -3px;
    box-shadow: 0 5px 10px 3px #ccc;
    .el-icon-close {
      display: block;
    }
  }
  .el-icon-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .el-icon-close:hover {
    color: orange;
  }
  p:hover {
    color: orange;
  }
  div:nth-child(1),
  div:nth-child(2),
  div:nth-child(3),
  div:nth-child(4) {
    margin-bottom: 20px;
  }
  img {
    width: 229px;
    height: 229px;
  }
  .browse {
    width: 229px;
    height: 311px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>
